<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>data-binding-method-set</title>
</head>

<body>
  <input q-value="value" type="text" id="input">
  <div q-text="value" id="el"></div>
  <script>
    var elems = [document.getElementById('el'), document.getElementById('input')];

    var data = {
      value: 'hello!'
    };

    var command = {
      text: function (str)
      {
        this.innerHTML = str;
      },
      value: function (str)
      {
        this.setAttribute('value', str);
      }
    };

    var scan = function ()
    {
      /**
       * 扫描带指令的节点属性
       */
      for (var i = 0, len = elems.length; i < len; i++) {
        var elem = elems[i];
        elem.command = [];
        for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
          var attr = elem.attributes[j];
          if (attr.nodeName.indexOf('q-') >= 0) {
            /**
             * 调用属性指令，这里可以使用数据改变检测
             */
            command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
            elem.command.push(attr.nodeName.slice(2));
          }
        }
      }
    }

    /**
     * 设置数据后扫描
     */
    function mvSet(key, value)
    {
      data[key] = value;
      scan();
    }
    /**
     * 数据绑定监听
     */
    elems[1].addEventListener('keyup', function (e)
    {
      mvSet('value', e.target.value);
    }, false);

    scan();

    /**
     * 改变数据更新视图
     */
    setTimeout(function ()
    {
      mvSet('value', 'fuck');
    }, 1000)

  </script>
</body>

</html>